<template>
	<view class="maintenance">
		<view class="content">
			<!-- 报事报修 -->
			<template>
				<view class="">
					<view class="uni-flex-center">
						<view class="uni-cell-100">
							<view class="title" style="padding-left: 20upx;">报修类型</view>
							<view class="report-content">
								<view v-for="(item, index) in type1" :key="index" @click="changeType(index, 1)"
									class="_box" :class="{ _boxActive: indexType === index }">
									{{ item.typename }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 通用样式 -->
			<view class="title" style="margin-bottom: 0;padding-left: 20upx;">问题描述</view>
			<view class="uni-flex-center main-wrapper">
				<view class="uni-cell-100 maintenance-content">
					<textarea class="txa" v-model="content" placeholder="请在此填写你所遇到的问题。"></textarea>

					<view class="uni-flex-btw border " style="margin-top: 20px;">
						<text class="title uni-cell-20">优先级</text>
						<radio-group @change="radioChange" style="display: flex;margin-bottom: 20upx;">
							<view v-for="(item, index) in items" :key="item.value">
								<label class="radio">
									<radio :value="item.value" :checked="index === current" />{{item.text}}
								</label>
							</view>
						</radio-group>
					</view>

					<view class="uni-flex-btw border" style="margin-top: 20px;">
						<text class="title uni-cell-20">联系人：</text>
						<input type="text" class="uni-cell-80" focus clearable v-model="name" placeholder="请输入联系人" />
					</view>

					<view class="uni-flex-btw border" style="margin-top: 20px;">
						<text class="title uni-cell-24">电话：</text>
						<input type="text" class="uni-cell-80" focus clearable v-model="phone" placeholder="请输入联系电话" />
					</view>

					<view class="title" style="margin-top: 10px;">
						<text>上传图片</text>
						<text style="color: #ccc;font-size: 24upx;font-weight: 400;">（最多三张）</text>
					</view>

					</image>
					<view v-for="(item, index) in complaintImages" :key="item.value">
						<image
							style="width: 80px;height: 80px;float: left;border: 1px dotted #aaffff;margin-right: 10px;"
							:src="item" mode="aspectFill">
						</image>
					</view>
					<image @click="imageUploads()" v-if="complaintImages.length<3"
						style="width: 80px;height: 80px;float:left;border: 1px dotted #ccc;"
						src="/static/img/main/upload.png" mode="aspectFill">
					</image>

				</view>
			</view>
			<view class="uni-flex-center tenance-foot"><button class="foot-btn" plain :disabled="disabled"
					@tap="sub">提交</button></view>
		</view>
		<!-- <li-mask ref="showMask"></li-mask> -->
	</view>
</template>

<script>
	import catLabel from '@/components/cat-label/cat-label.vue';
	import imageDragSort from '@/components/image-drag-sort/index.vue';
	// import wPicker from '@/components/w-picker/w-picker.vue';
	import qiniuUploader from '@/common/js/qiniuUploader.js';
	import liMask from '@/components/li-mask/li-mask.vue';
	import {
		add
	} from '@/api/repair.js'
	export default {
		components: {
			imageDragSort,
			catLabel,
			liMask
		},
		data() {
			return {
				headData: [{
					text: '报事报修',
					cls: 'iconweixiujifei'
				}, {
					text: '业主投诉',
					cls: 'icontousuyiwen'
				}],
				current: 0, //默认报事报修
				baoshi: '',
				jianyi: '',
				priority: '',
				name: '',
				phone: '',
				homeCart: '',
				type1: [{
					typename: '物业投诉',
					value: 4
				}, {
					typename: '热心建议',
					value: 5
				}, ], //报事类型
				type2: '', //投诉类型
				items: [{
					text: '一般',
					value: '2'
				}, {
					text: '次要',
					value: '3'
				}],
				delCurrent: 0, //默认立即处理
				personCurrent: 0, //默认联系人
				indexType: 0, //报修类型的索引
				indexType2: 0, //投诉类型的索引
				indexComplaintType: 0,
				complaintImages: [], //报事报修要上传的图片
				times: null,
				content: '', //报修内容
				type: 1, //报修类型
				contact: '', //联系人
				nowHours: null,
				emergency: 0, //紧急程度 1紧急 2不紧急
				firstName: '2',
				person: '',
				types: '',
				disabled: false
			};
		},
		computed: {
			qiniuDatas() {
				return this.$store.state.qiniuData;
			},
			nowDay() {
				let date = new Date();
				return date.getFullYear() + '' + (date.getMonth() + 1) + '' + date.getDate();
			}
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.priority = (i + 1);
						break;
					}
				}
			},
			//切换投诉建议
			changeBox(index) {
				this.current = index;
			},
			changeTime(index) {
				if (index == 1) {
					this.$refs.limit.show();
				}
			},
			getRepairStart() {
				// uni.showLoading({
				// 	title:'正在获取数据'
				// })
				this.$api.repairStart({}, res => {
					this.type1 = res.data.family;
					this.type2 = res.data.public;
					this.person = res.data.contacts;
					if (this.person.length > 0) {
						this.contact = this.person[this.personCurrent].id;
					}
					this.$store.commit('setContacts', res.data.contacts);
					this.$store.commit('setFamilyData', res.data.family);
					this.$store.commit('setPublicData', res.data.public);
				});
			},
			getUpToken() {
				let data = {};
				this.$api.upToken(data, res => {
					this.$store.commit('setQiniuData', res.data);
				});
			},


			//选择报修类型
			changeType(index, type) {
				this.type = index + 3;
				if (type == 1) {
					this.indexType = index;
				} else {
					this.indexType2 = index;
				}
			},

			imageUploads() {
				console.log(this.complaintImages);
				if (this.complaintImages.length >= 3) {
					uni.showToast({
						icon: 'none',
						title: '只能上传3张图片'
					});
					return;
				}
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						})
						uni.uploadFile({
							url: 'http://localhost:2020/file/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								if (res.statusCode == 200) {
									uni.hideLoading();
									this.complaintImages.push(res.data);
									uni.showToast({
										icon: 'none',
										title: '上传成功'
									});
								}
							},
							fail: (err) => {
								uni.hideLoading();
								uni.showToast({
									icon: 'none',
									title: '上传失败'
								});
							}
						});
					}
				})
			},

			async sub() {
				this.disabled = !this.disabled;
				if (!this.content) {
					uni.showToast({
						icon: 'none',
						title: '请填写内容'
					});
					this.disabled = !this.disabled;
					return;
				}

				if (!this.name) {
					uni.showToast({
						icon: 'none',
						title: '请填写联系人'
					});
					this.disabled = !this.disabled;
					return;
				}

				if (!this.phone) {
					var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
					if (myreg.test(this.phone) === false) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号'
						});
					}
					this.disabled = !this.disabled;
					return;
				}

				uni.showLoading({
					title: '正在提交数据...'
				});

				let data = {
					type: this.type,
					priority: this.priority,
					faultdp: this.content,
					reportp: this.name,
					phone: this.phone,
					homeCart: this.homeCart,
					imgs: this.complaintImages
				};

				add(data).then(res => {
					uni.showToast({
						icon: 'none',
						title: '提交成功，我们将及时和您联系',
						duration: 3000
					});
					uni.navigateBack({
						delta: 1
					});
					this.disabled = !this.disabled;
				})

			},
			getNowTime() {
				this.$forceUpdate();
				let date = new Date();
				this.nowHours = date.getHours();
				if (date.getMinutes() > 30) {
					this.nowHours = date.getHours() + 1;
					this.times = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + this
						.nowHours + ':00';
					this.endtime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + (this
						.nowHours + 2) + ':00';
				} else {
					this.times = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + this
						.nowHours + ':00';
					this.endtime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + (this
						.nowHours + 2) + ':00';
				}
			}
		},
		onShow() {
			this.getNowTime();
			// this.getRepairStart();
		},
		onLoad(option) {
			this.current = this.$Route.query.id;
			// this.getUpToken();
		}
	};
</script>
<style scoped>
	@import './complaints.css';
</style>
